<style scoped lang="less">
.ontent-main {
}
.search-wrapper {
  margin-left: 270px;
  // margin-top: 15px;
  overflow: auto;

  .ivu-form-item {
    margin-bottom: 0px;
    vertical-align: top;
    zoom: 1;
  }
}
</style>
<template>
  <div class="content-main">
    <!-- <div>
      <Card>
        <div style="text-align:center">
          <div>
            <div class="search-wrapper">
              <div style="float:left">
                <Form ref="searchForm" :label-width="80" v-model="condition">
                  <FormItem class="my-form-item" label="搜索">
                    <Input placeholder="请输教师姓名" clearable v-model="condition.teacherName"></Input>
                  </FormItem>
                </Form>
              </div>
              <div style="float:left; margin-left:5px">
                <Button type="primary" @click="queryMethod()" class="ivu-btn ivu-btn-primary">查询</Button>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>-->
    <div style="margin-top:10px">
      <Card :bordered="false">
        <!-- 数据表格 -->
        <div>
          <Table
            size="small"
            :border="false"
            :stripe="true"
            :columns="tableHeader"
            :data="tableData"
            :height="height"
            style="margin-top: 12px"
          ></Table>
        </div>
      </Card>
    </div>
    <div>
      <navigation :search.sync="doSearch" :pageSizeOpts="[9,18,27,36]" @navpage="pagerCallback"></navigation>
    </div>
  </div>
</template>
<script>
import navigation from '@/view/components/navigation/navigation'
import { getToken } from '@/libs/util'
import Vue from 'vue'

export default {
  components: {
    navigation
    // ComOpenRoom
  },
  props: ['roomId', 'ownInfo', 'roomInfo'],
  data () {
    return {
      loadMoreValue: 0,
      condition: {
        roomId: this.roomId
      },
      tableData: [],
      doSearch: false,
      tableHeader: [
        // {
        //   // 状态
        //   title: "状态",
        //   key: "status",
        //   minWidth: 90,
        //   ellipsis: true,
        //   align: "center",
        //   render: (h, params) => {
        //     let status = params.row.status;
        //     if (status === 1) {
        //       return h(
        //         "span",
        //         { style: { color: "#2d8cf0", fontWeight: "bold" } },
        //         "正常"
        //       );
        //     } else {
        //       return h(
        //         "span",
        //         { style: { color: "#ed4014", fontWeight: "bold" } },
        //         "已删除"
        //       );
        //     }
        //   }
        //   // fixed: "left"
        // },
        {
          title: '学生姓名',
          key: 'name',
          minWidth: 150,
          ellipsis: true,
          align: 'center'
          // fixed: "left"
        },
        {
          title: '性别',
          key: 'name',
          minWidth: 150,
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let sex = params.row.sex
            return h('span', params.row.sex === 0 ? '男' : '女')
          }
        },
        {
          title: '专业',
          key: 'professionName',
          minWidth: 100,
          ellipsis: true,
          align: 'center'
        },
        // {
        //   title: "提问数",
        //   key: "studentCount",
        //   minWidth: 90,
        //   ellipsis: true,
        //   align: "center"
        // },
        {
          title: '加入时间',
          key: 'createdAt',
          minWidth: 150,
          ellipsis: true,
          align: 'center'
          // render: (h, params) => {
          //   return h('span', {}, this.dateFormat(params.row.createdAt))
          // }
        }
        // {
        //   title: '操作',
        //   minWidth: 200,
        //   align: 'center',
        //   // fixed: "right",
        //   render: (h, params) => {
        //     let btns = []
        //     btns.push(
        //       h(
        //         'Button',
        //         {
        //           props: {
        //             type: 'success',
        //             size: 'small'
        //           },
        //           style: {
        //             marginRight: '5px'
        //           },
        //           on: {
        //             click: () => {
        //               this.modifyBtn(params.row)
        //             }
        //           }
        //         },
        //         '进入答疑室'
        //       )
        //     )
        //     return h('div', btns)
        //   }
        // }
      ],

      // 审核 同意  不同意
      verifyVlaue: 1,
      height: 420
    }
  },

  methods: {
    // 添加教师操作
    addTeacherOperator () {
      if (
        this.ownInfo.isOwnRoom === true &&
        this.ownInfo.roleKey === 'teacher'
      ) {
        this.tableHeader.unshift({
          title: '状态',
          minWidth: 120,
          key: status,
          align: 'center',
          render: (h, params) => {
            if (params.row.status === -1) {
              return h('div', { style: { color: '#ed4014' } }, '待审核')
            } else {
              return h('div', { style: { color: '#19be6b' } }, '正常')
            }
          }
        })
        this.tableHeader.push({
          title: '操作',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            let btns = []
            if (params.row.status === -1) {
              btns.push(
                h(
                  'Button',
                  {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '确认',
                          content: '是否通过？',
                          okText: '是',
                          cancelText: '否',
                          onOk: () => {
                            // 审核学生申请
                            debugger
                            console.log(this.verifyVlaue)

                            this.handleVerify(params.row.tid, 1)
                          },
                          onCancel: () => {
                            debugger
                            this.handleVerify(params.row.tid, -1)
                          }
                        })
                      }
                    }
                  },
                  '审核'
                )
              )
            } else {
              btns.push(
                h(
                  'Button',
                  {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '确认',
                          content: '确认删除',
                          onOk: () => {
                            this.deletStudent(params.row.tid)
                          }
                        })
                      }
                    }
                  },
                  '移除'
                )
              )
            }
            return h('div', btns)
          }
        })
      }
    },
    // 审核学生
    handleVerify (studentId, status) {
      const data = {
        studentId,
        status
      }
      this.$httpUtil.asyncPost('web/raroom/student/verify', data, res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.msg)
          this.queryMethod()
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    // 移除学生
    deletStudent (studentId) {
      debugger
      this.verifyVlaue
      this.$httpUtil.asyncDelete(
        'web/raroom/student/delete',
        { id: studentId },
        res => {
          debugger
          if (res.data.code === 200) {
            this.$Message.success(res.data.msg)
            this.queryMethod()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    //* *******开通答疑室start******** */

    //* *******开通答疑室 end******** */

    // 显示专业
    showModal (dataList, title, key) {
      if (dataList && dataList.length > 0) {
        this.$Modal.info({
          // title:title,
          render: h => {
            let tags = []
            dataList.forEach(item => {
              tags.push(h('tag', { props: { color: 'green' } }, item[key]))
            })
            return h('div', tags)
          }
        })
      }
    },
    // 搜索重置
    handleResetBtn () {
      this.$refs['searchForm'].resetFields()
      this.condition = {}
      this.createdDateRange = []
      this.queryMethod()
    },

    // 点击翻页
    pagerCallback (page, search) {
      let option = {
        url: 'web/raroom/student/queryByCondition',
        pageData: page,
        success: response => {
          this.tableData = response.data.records
        }
      }
      if (search) {
        option.params = {
          data: this.condition
        }
      }
      this.$httpUtil.pageSearch(option)
    },
    dateFormat (time) {
      if (time) {
        let date = new Date(time)
        return date.format('yyyy-MM-dd')
      } else {
        return ''
      }
    },
    queryMethod () {
      // if (this.createdDateRange[0] !== '') {
      //   // 如果选择了日期，取出起始值
      //   this.condition.createdDateStart = this.createdDateRange[0]
      //   this.condition.createdDateEnd = this.createdDateRange[1]
      // }

      this.doSearch = true
    },

    // 初始化方法
    init () {
      if (this.roomStatus == 1) {
        this.addTeacherOperator()
      }
      this.queryMethod()
    }
  },
  computed: {
    roomStatus () {
      return this.roomInfo.status
    }
  },
  mounted () {
    this.init()
  },
  watch: {}
}
</script>
